    <!-- <h1>会员等级</h1> -->
<script setup lang='ts'>
import { ref, reactive, onMounted, computed } from "vue";
import { ElTable, FormInstance, FormRules } from "element-plus";
import { ElMessageBox } from "element-plus";
import userManagementHooks from "../../hooks/userManagement";
import vipCardLevelstore from "../../store/vipCardLevel";

const store = vipCardLevelstore();
const menbershipList = computed(() => store.getVipCardLevel);
const ruleForm = computed(() => store.getIntegralRuleById);
const ruleForm2 = computed(()=>store.getVipCardLevelById);

const title = ref("");
const state = ref<number>(0);
const formSize = ref("default"); // 积分表格

// 页面加载
const login = () => {
  userManagementHooks.getVipLevel();
  const id = ref<number>(1);
  userManagementHooks.integralRuleById(id.value);
  // console.log("页面加载");
};

// 对话框
const dialogVisible1 = ref<boolean>(false);
const dialogVisible2 = ref<boolean>(false);


const chenged = () => {
  console.log("弹出框表格数据", ruleForm.value);
  dialogVisible1.value = false;
  let buy = Number(ruleForm.value.buy);
  let id = Number(ruleForm.value.id);
  let continuousDay = Number(ruleForm.value.continuousDay);
  let deductions = Number(ruleForm.value.deductions);
  let deductionsPercentage = Number(ruleForm.value.deductionsPercentage);
  let extra = Number(ruleForm.value.extra);
  let punchRewards = Number(ruleForm.value.punchRewards);
  userManagementHooks.integralRuleUpdate(
    buy,
    continuousDay,
    deductions,
    deductionsPercentage,
    extra,
    id,
    punchRewards
  );
};

// 点击添加按钮
const add = () => {
  state.value = 0;
  title.value = "添加";
  ruleForm2.value.defaultUse = '';
  ruleForm2.value.discount = '';
  ruleForm2.value.integralRequirement = '';
  ruleForm2.value.name = '';
  // console.log("ruleForm2",ruleForm2.value);
};

// 点击编辑按钮
const redact = (id) => {
  state.value = 1;
  title.value = "编辑";
  console.log("id", id);
  userManagementHooks.searchVipLevelById(id);
  // console.log(ruleForm2.value);
};

// 提交按钮
const submit = () => {
  let defaultUse = (ruleForm2.value.defaultUse == "是" ? 0 : 1);
  let discount = ruleForm2.value.discount;
  let id = ruleForm2.value.id;
  let integralRequirement = Number(ruleForm2.value.integralRequirement);
  let name = ruleForm2.value.name;
  let createTime = ruleForm2.value.createTime
  console.log("ruleForm2", ruleForm2.value);
  console.log("defaultUse", defaultUse);
  if (state.value == 0) {
    // console.log(ruleForm2.value);
    userManagementHooks.addVipLevel(
      defaultUse,
      discount,
      integralRequirement,
      name
    );
    // location.reload();
    // console.log(6666);
  } else {
    userManagementHooks.changeVipLevel(
      id,
      name,
      defaultUse,
      integralRequirement,
      discount,
      createTime
    )
  }
};

// 删除
const del = (id) => {
  console.log("发起删除请求");
  userManagementHooks.delVipLevelById(id);
};



onMounted(() => {
  login();
});
</script>
<!-- 模型 -->
<template>
  <div class="">
    <div class="fRight">
      <el-button type="primary" @click="dialogVisible1 = true"
        >积分任务</el-button
      >
      <el-button type="primary" @click="(dialogVisible2 = true), add()"
        >添加等级</el-button
      >
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        :data="menbershipList"
        style="width: 100%"
        table-layout="fixed"
        border
      >
        <el-table-column prop="name" label="等级名称" />
        <el-table-column prop="defaultUse" label="是否为默认等级">
          <template #default="{ row }">
            <el-tag class="ml-2" :type="row.defaultUse == 0 ? 'success' : ''">{{
              row.defaultUse == 0 ? "是" : "否"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="integralRequirement" label="成长积分" />
        <el-table-column prop="discount" label="折扣" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              type="primary"
              @click="redact(row.id), (dialogVisible2 = true)"
              >编辑</el-button
            >
            <el-button type="danger" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 积分任务对话框 -->
    <el-dialog v-model="dialogVisible1" title="积分详情" width="45%">
      <el-form
        :model="ruleForm"
        label-width="200px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="签到奖励：" prop="name">
          <el-col :span="8">
            <el-input v-model="ruleForm.punchRewards" />
          </el-col>
          <el-col :span="1">
            <div class="deep">分</div>
          </el-col>
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <el-form-item label="每连续签到：" prop="name">
              <el-input v-model="ruleForm.continuousDay" />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <div class="deep">天</div>
          </el-col>
          <el-col :span="10">
            <el-form-item label="额外奖励：" prop="name">
              <el-input v-model="ruleForm.extra" />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <div class="deep">分</div>
          </el-col>
        </el-row>
        <el-form-item label="购物消费：" prop="name">
          <el-col :span="8"> <el-input v-model="ruleForm.buy" /> </el-col
          ><el-col :span="1"> <div class="deep">元</div> </el-col
          ><span>&nbsp;&nbsp;&nbsp;&nbsp; 奖励1分积分（不含运费）</span>
        </el-form-item>
        <el-form-item label="抵扣订单金额每：" prop="name">
          <el-col :span="8">
            <el-input v-model="ruleForm.deductions" />
          </el-col>
          <el-col :span="1"> <div class="deep">分</div> </el-col
          ><span>&nbsp;&nbsp;&nbsp;&nbsp; 抵扣1元</span>
        </el-form-item>
        <el-form-item label="最高可抵扣订单金额比例：" prop="name">
          <el-col :span="8">
            <el-input v-model="ruleForm.deductionsPercentage" />
          </el-col>
          <el-col :span="1">
            <div class="deep">%</div>
          </el-col>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="chenged"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑添加对话框 -->
    <el-dialog v-model="dialogVisible2" :title="title" width="30%">
      <el-form
        :model="ruleForm2"
        label-width="200px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
        ><el-form-item label="会员等级名称：">
          <el-col :span="12">
            <el-input v-model="ruleForm2.name" />
          </el-col>
        </el-form-item>
        <el-form-item label="成长值积分：">
          <el-col :span="12">
            <el-input v-model="ruleForm2.discount" />
          </el-col>
        </el-form-item>
        <el-form-item label="设为默认会员等级：">
          <el-radio-group v-model=ruleForm2.defaultUse>
            <el-radio label="是"  />
            <el-radio label="否"  />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="折扣：">
          <el-col :span="8">
            <el-input v-model="ruleForm2.integralRequirement" />
          </el-col>
          <el-col :span="1">
            <div class="deep">%</div>
          </el-col>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="(dialogVisible2 = false), submit()">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.fRight {
  float: right;
}
.deep {
  width: 20px;
  height: 29px;
  line-height: 29px;
  background-color: #f2f2f2;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
}
</style>